import React, { PureComponent } from 'react';
import { ModalC, FormGroup, DATA_ENTRY } from '../../../components';
import { connect } from 'dva';
import { getTreebyKey } from '../../../utils/utils';
import moment from 'moment';

@connect(({ systemNoticeSettingM, loading }) => ({ systemNoticeSettingM, loading }))
export default class AddModalC extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // 新增
  add = async () => {
    const data = await this.formRef.getFormGroupData();
    if (!data) return;
    const pageUrls = data.involvedPages;
    const involvedPages = [];
    pageUrls?.map((item) => {
      const tree = getTreebyKey(this.props.menuList, item);
      involvedPages.push({
        pageName: tree.pageName,
        pageUrl: item,
      });
    });
    data.involvedPages = involvedPages;
    data.launchDate = data.launchDate.format('YYYY-MM-DD');
    // console.log(data)
    // return
    this.props.dispatch({
      type: 'systemNoticeSettingM/addNotice',
      payload: {
        ...data,
        id: this.props.detailData?.id,
      },
      callback: () => {
        this.props.onOk();
      },
    });
  };

  // 获取涉及页面的回填数据
  getPagesId = (arr) => {
    const temp = [];
    arr.map((item) => {
      temp.push(item.pageUrl);
    });
    return temp;
  };

  render() {
    const { detailData = {}, loading } = this.props;
    const modalProps = {
      visible: this.props.visible,
      onOk: () => {
        this.add();
      },
      onCancel: () => {
        this.props.onCancel();
      },
      title: this.props.detailData?.id ? '编辑' : '新增',
      width: 680,
      maskClosable: false,
      confirmLoading: loading.effects['systemNoticeSettingM/addNotice'] == true,
    };
    return (
      <ModalC {...modalProps}>
        <div>
          <FormGroup
            dataSource={[
              {
                dataIndex: 'title',
                title: '标题',
                type: DATA_ENTRY.INPUT,
                span: 12,
                rules: [{ required: true, message: '请输入标题！' }],
                initialValue: detailData.title,
              },
              {
                dataIndex: 'remindTenants',
                title: '提醒租户',
                type: DATA_ENTRY.TENANT,
                span: 12,
                multiple: true,
                positionBody: true,
                initialValue: detailData.remindTenants || undefined,
              },
              {
                dataIndex: 'launchDate',
                title: '上线日期',
                type: DATA_ENTRY.SINGLEDATE,
                span: 12,
                rules: [{ required: true, message: '请选择上线日期！' }],
                initialValue: detailData.launchDate ? moment(detailData.launchDate) : undefined,
              },
              {
                dataIndex: 'involvedPages',
                title: '涉及页面',
                type: DATA_ENTRY.TREESELECT,
                span: 12,

                dataSource: this.props.menuList || [],
                isMultiple: true,
                allowClear: true,
                positionBody: true,
                treeDefaultExpandAll: true,
                initialValue: detailData.involvedPages?.length ? this.getPagesId(detailData.involvedPages) : undefined,
                maxTagCount: 0,
              },
              {
                dataIndex: 'functionalDescription',
                title: '功能描述',
                type: DATA_ENTRY.INPUT,
                rules: [{ required: true, message: '请输入功能描述！' }],
                showTextArea: true,
                autoSize: { minRows: 4, maxRows: 4 },
                span: 24,
                initialValue: detailData.functionalDescription,
              },
            ]}
            autoLayout={false}
            onRef={(ref) => {
              this.formRef = ref;
            }}
          />
        </div>
      </ModalC>
    );
  }
}
